<template>
  <div class="quick-map">
    <PagePanel :panelTitle="quickMapPanel.panelTitle" @clickClose="clickClose">
      <div class="contain">
        <div
          :class="['item', image.switch ? 'item-active' : '']"
          :key="image.id"
          v-for="image in images"
        >
          <div class="img-box">
            <img :src="image.imageUrl" alt="" />
          </div>
          <div
            :class="['title-box', image.switch ? 'title-box-active' : '']"
            @click="imageSelect(image)"
          >
            {{ image.name }}
          </div>
        </div>
      </div>
    </PagePanel>
  </div>
</template>

<script>
import PagePanel from "@/components/PagePanel";
export default {
  components: { PagePanel },
  data() {
    return {
      images: [
        {
          id: 0,
          name: "矢量底图",
          imageUrl: require("../../../assets/home/left/quickmap/shiliang.png"),
          switch: false,
          layerPath: "矢量底图",
        },
        {
          id: 1,
          name: "影像底图",
          imageUrl: require("../../../assets/home/left/quickmap/yingxiang.png"),
          switch: false,
          layerPath: "影像底图",
        },
      ],
      layers: {
        sLayer: "",
        yLayer: "",
      },
      imageLayers: {
        sLayer: "",
        yLayer: "",
      },
    };
  },
  mounted() {
    this.layers.sLayer = this.shiliangLayer();
    this.layers.yLayer = this.yingxiangLayer();
  },
  methods: {
    async imageSelect(info) {
      // item.switch = !item.switch;
      const layer = this.images.find((item) => {
        return item.id === info.id;
      });
      layer.switch = !layer.switch;

      if (layer.switch) {
        //切换之后如果是true，加载底图

        this.imageLayers.sLayer &&
          window.cesiumViewer.imageryLayers.remove(
            this.imageLayers.sLayer,
            true
          );
        this.imageLayers.yLayer &&
          window.cesiumViewer.imageryLayers.remove(
            this.imageLayers.yLayer,
            true
          );
        if (layer.id === 0) {
          this.imageLayers.sLayer =
            await window.cesiumViewer.imageryLayers.addImageryProvider(
              this.layers.sLayer
            );
        } else {
          this.imageLayers.sLayer =
            await window.cesiumViewer.imageryLayers.addImageryProvider(
              this.layers.yLayer
            );
        }

        // 判断另外一个图层的switch 如果是true，切换成false
        const otherId = 1 - layer.id;
        if (this.images[otherId].switch) {
          const layer = this.images.find((item) => {
            return item.id === otherId;
          });
          layer.switch = false;
        }
      } else {
        window.cesiumViewer.imageryLayers.remove(this.imageLayers.sLayer, true);
        window.cesiumViewer.imageryLayers.remove(this.imageLayers.yLayer, true);
      }
    },
    shiliangLayer() {
      return new Cesium.WebMapTileServiceImageryProvider({
        url:
          "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" +
          "b246eea69f052a58b4b1f4f7b4c099a5",
        layer: "vec",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "c",
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        credit: new Cesium.Credit("天地图矢量"),
        maximumLevel: 18,
        tilingScheme: new Cesium.GeographicTilingScheme(),
        tileMatrixLabels: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
        ],
      });
    },
    yingxiangLayer() {
      return new Cesium.WebMapTileServiceImageryProvider({
        url:
          "http://t0.tianditu.gov.cn/img_c/wmts?tk=" +
          "b246eea69f052a58b4b1f4f7b4c099a5",
        layer: "img",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "c",
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        credit: new Cesium.Credit("天地图矢量"),
        maximumLevel: 18,
        tilingScheme: new Cesium.GeographicTilingScheme(),
        tileMatrixLabels: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
        ],
      });
    },

    clickClose() {
      this.$store.commit("setQuickPanel", false);
    },
  },
  computed: {
    quickMapPanel() {
      return this.$store.state.quickMapPanel;
    },
  },
};
</script>

<style scoped lang="less">
.quick-map {
  position: absolute;
  width: 320px;
  height: 220px;
  bottom: 80px;
  left: 60px;
  font-size: 14px;
  color: #fff;
  z-index: 10;
  pointer-events: auto;
  .contain {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    .item {
      height: 138px;
      flex: 1;
      border: 1px solid #409eff;
      margin: 0 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .img-box {
        width: 100%;
        height: calc(100% - 27px);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title-box {
        width: 100%;
        padding: 5px 0;
        height: 16px;
        line-height: 16px;
        text-align: center;
        background: #409eff;
        opacity: 0.7;
        border: 1px solid #409eff;
        border-top: none;
        cursor: pointer;
        &:hover {
          opacity: 1;
        }
      }

      &:hover {
        .title-box {
          opacity: 1;
        }
      }
    }
    .item-active {
      .title-box {
        background-color: #1a73e8;
        opacity: 1;
      }
    }
  }
}
</style>
